<template>
  <div class="editTemplate">
    <a-modal
      v-if="submitTemplateVisiable"
      @cancel="cancelSubmitTemplate"
      :visible="submitTemplateVisiable"
      :maskClosable="false"
      title="保存模板"
      :footer="null"
    >
      <a-form :model="svgComponentsLists">
        <a-form-item
          label="模板标题"
          name="templateName"
          :rules="[{ required: true, message: '请输入模板标题!' }]"
        >
          <a-input
            v-model:value="svgComponentsLists.templateName"
            placeholder="请输入模板标题"
            allowClear
          />
        </a-form-item>
        <a-form-item :labelCol="{ span: 4 }" label="模板备注" name="remark">
          <a-textarea
            width="300px"
            v-model:value="svgComponentsLists.remark"
            placeholder="请输入模板备注"
            allowClear
            :autoSize="{ minRows: 2, maxRows: 6 }"
          />
        </a-form-item>
        <div class="button">
          <div>
            <a-form-item>
              <a-button type="default" @click="cancelSubmitTemplate">
                取消
              </a-button>
            </a-form-item>
          </div>
          <div>
            <a-form-item>
              <a-button
                type="primary"
                html-type="submit"
                @click="createTemplate"
              >
                确定
              </a-button>
            </a-form-item>
          </div>
        </div>
      </a-form>
    </a-modal>
  </div>
</template>
<script>
export default {
  props: ['submitTemplateVisiable', 'submitTemplateParams'],
  computed: {
    svgComponentsLists() {
      return this.submitTemplateParams;
    },
  },
  methods: {
    createTemplate() {
      if (this.svgComponentsLists.templateName) {
        this.$emit('createTemplate');
        this.cancelSubmitTemplate();
      }
    },
    cancelSubmitTemplate() {
      this.$emit('cancelSubmitTemplate', false);
    },
  },
};
</script>
<style scoped>
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
.button {
  display: flex;
}
.button > div {
  text-align: center;
  flex: 1;
}
.button .ant-row {
  display: inline !important;
  flex-flow: row wrap !important;
}
</style>
